<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext.ux.grid.TriStateTree extension</title>
<link rel="stylesheet" type="text/css"
	href="http://wap7.ru/folio/ext-4.0.7/resources/css/ext-all.css" />

<script type="text/javascript"
	src="http://wap7.ru/folio/ext-4.0.7/ext-all.js"></script>
<script type="text/javascript" src="NodeDisabled.js"></script>

<script type="text/javascript" src="TriStateTree.js"></script>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	margin: 30px 50px;
}

h3 {
	margin: 10px 0;
}

.small {
	font-size: 10px;
}

.large {
	font-size: 16px;
}

li {
	list-style: decimal;
	margin-bottom: 5px;
}

.tree-node-disabled .x-grid-cell {
	-moz-opacity: 0.5;
	opacity: .5;
	filter: alpha(opacity = 50);
}

.x-panel-body .x-tree-checkbox {
	background-image: url(tricheckbox.gif) !important;
}

.x-panel-body .x-tree-checkbox-indeterminate .x-tree-checkbox {
	background-position: 0 -26px;
}
</style>
<script type="text/javascript">
	Ext.onReady(function() {

		Ext.create('Ext.ux.tree.TriStateTreePanel', {
			ALL_ID : 1,
			width : 400,
			height : 250,
			plugins : [ {
				ptype : 'nodedisabled'
			} ],
			tbar : [
					{
						xtype : 'button',
						text : 'Set selected  3,4,7,10',
						handler : function() {
							this.up('panel').setSelections([ 3, 4, 7, 10 ])
						}
					},
					{
						xtype : 'button',
						text : 'Get selected',
						handler : function() {
							Ext.MessageBox.show({
								title : 'Selected Nodes',
								msg : JSON.stringify(this.up('panel')
										.getSelections(), null, 4),
								icon : Ext.MessageBox.INFO
							});
						}
					},
					{
						xtype : 'button',
						text : 'Get selected id_only ',
						handler : function() {

							Ext.MessageBox.show({
								title : 'Selected Nodes',
								msg : JSON.stringify(this.up('panel')
										.getSelections(true), null, 4),
								icon : Ext.MessageBox.INFO
							});
						}
					} ],
			renderTo : 'grid-example'
		});
	});
</script>
</head>
<body>


	<div class="large">The Ext.ux.grid.TriStateTree</div>



	<div id="grid-example" style="margin: 30px 0;"></div>

</body>
</html>